<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定样式</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>


<style>
  .basic{
    width: 400px;
    height: 100px;
    border: 1px solid black;
  }
  .happy{
    border: 4px solid red;;
    background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg,yellow,pink,orange,yellow);
  }
  .sad{
    border: 4px dashed rgb(2, 197, 2);
    background-color: gray;
  }
  .normal{
    background-color: skyblue;
  }
  .atguigu1{
    background-color: yellowgreen;
  }
  .atguigu2{
    font-size: 30px;
    text-shadow:2px 2px 10px red;
  }
  .atguigu3{
    border-radius: 20px;
  }
</style>
<body>
<!-- 准备好 一个容器-->
<div id="root">
<!--  绑定class样式 --- 字符串写法,,适用于：样式的类名不确定，需要动态更改 -->
  <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/><br/>

  <!--  绑定class样式 --- 数组写法,,适用于：样式的类名不确定,个数也不确定，需要动态更改 -->
  <div class="basic" :class="classArr">{{name}}</div><br/><br/><br/>

  <!--  绑定class样式 --- 对象写法,,适用于：样式的类名确定,个数也确定，需要动态决定是否使用 -->
  <div class="basic" :class="classObj">{{name}}</div><br/><br/><br/>

  <div class="basic" :style="styleObj">{{name}}</div>

</div>

</body>


<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    data:{
      name:'itshumm',
      mood:'normal',
      classArr:['atguigu1','atguigu2','atguigu3'],
      classObj:{
        atguigu1:false,
        atguigu2:false,
      },
      styleObj:{
        fontSize: '40px',
        color: 'red',
        backgroundColor:'orange'
      }
    },
    methods:{
      changeMood(){
        const arr = ['happy','sad','normal']
        this.mood = arr[Math.floor(Math.random()*3)]
      }
    }
  })

</script>

</html>
